<template>
  <div class="App">
    <h1>MES资产盘点</h1>
    <div class="containe">
      <div class="inp">
        <button @click="inputz">GDGDZC</button>
        <button @click="inputh">HR52-BT-</button>
        
      </div>
    </div>
    <div class="send">
      <textarea placeholder="填写编码后回车，或是用扫码枪扫描条码" v-model="input" @keydown.prevent.enter="scan" ref="inputField" />
      <button v-on:click="send">扫描后点击上传位置记录</button>
    </div>
    <div v-if="message" class="alert">{{ message }}</div>
    <ul class="list">
      <li v-for="(v, i) in list" v-bind:key="i">
        <button class="destroy" @click="remove(i)"></button>
        <div class="content"><span v-show="!v.Flag">采集的条码:</span> <span v-show="v.Flag">序列号：</span>{{ v.SerialNum }}
        </div>
        <div class="content" v-show="v.Flag">资产名称：{{ v.EquipmentName }}</div>
        <div class="time">
          <!-- {{ v.time.toLocaleDateString(undefined, {
            year: "numeric",
            month: "long",
            day: "numeric",
          }) }}{{ v.time.toLocaleTimeString() }} -->
          <span v-show="v.Flag">资产编码:</span>{{ v.AssetNum }}
        </div>
      </li>
    </ul>

  </div>
  <pandian :list="list" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { client } from ".././client";
import type { ResGetOneData } from ".././shared/protocols/PtlGetOneData";
// import { SlideVerify } from 'vue-monoplasty-slide-verify';
import pandian from "./components/pandianlist.vue"

export interface AppData {
  input: string;
  message: string;
  list: ResGetOneData["data"][];
}

export default defineComponent({
  name: "App",
  data() {
    return {
      input: "",
      // 用于存储提示信息
      message: "",
      list: [] as ResGetOneData["data"][],
    } as AppData;
  },

  methods: {
    async loadList() {
      try {
        // 从 localStorage 中加载数据
        const savedList = localStorage.getItem("list");
        if (savedList) {
          const parsedList = JSON.parse(savedList);
          // 确保解析后的数据是一个数组
          if (Array.isArray(parsedList)) {
            this.list = parsedList;
          }
        }
      } catch (error) {
        console.error("Error loading list from localStorage:", error);
      }
    },
    // 删除待办事项
    async remove(index: number) {
      this.list.splice(index, 1);
      localStorage.setItem("list", JSON.stringify(this.list));
    },

    async scan() {
      if (!this.input.length) {
        // console.warn("输入为空, 不能采集.");
        this.message = "输入为空, 不能采集.";
        this.clearMessageAfterDelay()
        return;
      }
      // 检查输入是否已经存在于 list 中
      // const isDuplicate = this.list.some(
      //   (item) => item.SerialNum === this.input
      // );
      // const isDuplicate2 = this.list.some(
      //   (item) => item.AssetNum === this.input
      // );
      // if (isDuplicate || isDuplicate2) {
      //   console.warn("重复输入, 不能采集.");
      //   this.input = ""; // 清空输入框
      //   return;
      // }
      // 检查输入是否已经存在于 list 中
      const isDuplicate = this.list.some(
        (item) => item.SerialNum === this.input
      );
      const isDuplicate2 = this.list.some(
        (item) => item.AssetNum === this.input
      );

      if (isDuplicate || isDuplicate2) {
        this.message = "输入的序列号或资产号已存在."; // 设置提示信息
        this.clearMessageAfterDelay()
        return;
      }
      let ret = await client.callApi("GetOneData", {
        ScanNum: this.input,
      });

      // Success
      if (ret.isSucc) {
        this.list.unshift(ret.res.data);
      } else {
        this.list.unshift({
          Flag: false,
          AssetNum: "扫描的该条码不在MES资产盘点范围内",
          SerialNum: this.input
        });
      }
      
      localStorage.setItem("list", JSON.stringify(this.list));
      this.input = ""; // 清空输入框
    },
    async send() {
      if (!this.list.length) {
        // alert("你还没扫条码呢！");
        this.message = "你还没扫条码呢！";
        this.clearMessageAfterDelay()
        return;
      }
      
      const req = this.list.filter((item) => item.Flag === true).map((item) => {
        const { Flag, ...rest } = item;
        return rest;
      })
      const Location = prompt("请输入扫描编码的位置", "惠州1栋2楼H1组装");
      if (!Location) {
        return;
      }
      await req.map(item => client.callApi("pandian/AddData", {
        ...item,
        Location: Location,
      }))
      this.list = []
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    inputz() {
      console.log(this.input);
      this.input = "GDGDZC";
      this.$nextTick(() => {
        this.$refs.inputField.focus();
        
      });
    },
    inputh() {
      this.input = "HR52-BT-";
      this.$nextTick(() => {
        this.$refs.inputField.focus();
      });
    },
    clearMessageAfterDelay() {
    setTimeout(() => {
      this.message = ""; // 清空提示信息
    }, 5000); // 10 秒钟后执行
  },
    onSuccess() {
      console.log("验证成功");
    },
    onFail() {
      console.log("验证失败");
    },
  },
  components: {
    // SlideVerify
  },
  mounted() {
    this.loadList();
  },
});
</script>

<style lang="less">
@import ".././App.less";
</style>
